<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .overlay {
            /* 用于遮挡背景 */
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, .8);
        }
        
        .lightbox {
            /* 需要吸引用户注意的元素 */
            position: absolute;
            z-index: 1;
            /* [其余样式] */
        }
        /* .overlay 遮罩层负责把这个关键元素背后的所有东西调暗。.lightbox
需要指定一个更高的z-index，以便绘制在遮罩层的上层。这个方法稳定可
靠，但需要增加一个额外的HTML 元素，这意味着该效果无法由CSS 单独
实现。这不是一个很严重的问题，但对我们来说又确实是个麻烦事。不过还
好，有其他方法可以摆脱这个麻烦。 */
        /* 我们可以用伪元素来消除额外的HTML 元素，比如： */
        
        body.dimmed::before {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            background: rgba(0, 0, 0, .8);
        }
        /* 如果把遮罩层交给这个元素自己的::before 伪元素来实现，就可以弥
补这些不足了。给伪元素设置z-index: -1; 就可以让它出现在元素的背
后。尽管这解决了可移植性的问题，但无法对遮罩层的Z 轴层次进行细粒度
的控制。它可能会出现在这个元素之后（这是我们期望的），但也可能会出
现在这个元素的父元素或祖先元素之后。
这个方法还有一个问题，伪元素无法绑定独立的JavaScript 事件处理
函数。当遮罩层是由一个独立的元素来实现时，我们可以给它绑定事件处理
函数，比如当用户点击遮罩层时自动关闭弹出层。当使用弹出层自己的伪元
素来实现遮罩层时，就需要判断用户到底是点了弹出层还是遮罩层，这就变
得相当棘手了。 */
        /* 这个初步的解决方案有一个明显的问题，就是它无法在较大的屏幕分
辨率（>2000px）下正常工作。我们要么加大数字来缓解这个问题，要么换
用视口单位来一劳永逸地解决它，只有这样才能确保“遮罩层”总是可以覆
盖（甚至超出）视口。因为我们无法分开指定水平和垂直方向上的扩张半
径，所以此处最合适的视口单位是vmax。也许你对vmax 单位还不熟悉，这
里简单介绍一下：1vmax 相当于1vw 和1vh 两者中的较大值。100vw 等于整
个视口的宽度，100vh 就是视口的高度。因此，满足我们需求的最小值就是
50vmax。由于投影是同时向四个方向扩展的，这个遮罩层的最终尺寸将是
100vmax 加上元素本身的尺寸。
box-shadow: 0 0 0 50vmax rgba(0,0,0,.8); */
        /* 第一，由于遮罩层的尺寸是与视口相关，而不是与页面相关的，当我们
滚动页面时，遮罩层的边缘就露出来了，除非给它加上position: fixed;
这个样式，或者页面并没有长到需要滚动的程度。此外，由于页面很可能真
的很长，为了规避这个缺陷而扩大投影的扩张半径就不太明智了。相反，我
推荐有限度地应用这个技巧，比如配合固定定位来使用，或者当页面没有滚
动条时再用。 */
        /* 第二，当使用一个独立的元素（或伪元素）来实现遮罩层时，这个遮罩
层不仅可以从视觉上把用户的注意力引导到关键元素上，还可以防止用户的
鼠标与页面的其他部分发生交互，因为遮罩层会捕获所有指针事件。boxshadow
并没有这种能力，因此它只能在视觉上起到引导注意力的作用，却
无法阻止鼠标交互。这一点是否可以接受，取决于你的具体需求。 */
    </style>
</head>

<body>

</body>

</html>